import React, {useEffect, useRef, useState} from "react";
import {Button, Flex, Form, Select} from "antd";
import {useMount} from "ahooks";

const SceneModal = (props) => {
    // 在这里可以访问传递的数据
    const receivedData = props.data;
    console.log("receivedData", receivedData)


    const preview = useRef(null)
    //捕获方式数据
    const acquisitionModeData = [
        {
            value: 'auto',
            label: '自动'
        },
    ];
    //捕获方式选中数据
    const [acquisitionModeCheckData, setAcquisitionModeCheckData] = useState({});

    useEffect(() => {
        getSourceSettings();
    }, []);
    const getSourceSettings = async () => {
        const result = await window.tm?.ipcRenderer.invoke('getSourceSettings', {
            sceneName: receivedData.data.sceneName,
            name: receivedData.data.name
        })
        console.log("result2222222", result)
        const displayData = await window.tm?.ipcRenderer.invoke("getAllDisplays");
        for (const index in displayData) {
            console.log("item", result[index])
            displayData[index].value = index;
        }
        console.log("displayData2222222", displayData)
        if(displayData){
            setDisplayData(displayData);
        }
        if(typeof result.settings.monitor !== "object" && displayData){
            setDefaultValue(displayData[result.settings.monitor]);
        }else{
            setDefaultValue(displayData[0]);
        }

    }

    useMount(()=>{
        async function  init() {
            const setupPreview = async () => {
                if(!preview.current) return
                const {width, height, x, y} = preview.current.getBoundingClientRect();
                const result = await window.tm?.ipcRenderer.invoke('preview-init-child', {
                    width,
                    height,
                    x,
                    y
                });
                preview.style = `flex-basis:${result.height}px!important`;
                return result
            }
            function resizePreview() {
                const previewContainer = preview.current
                if(!previewContainer) return
                const {width, height, x, y} = previewContainer.getBoundingClientRect();
                window.tm!.ipcRenderer.invoke('preview-bounds-child', {
                    width,
                    height,
                    x,
                    y,
                }).then(result=>{
                    previewContainer.style = `flex-basis:${result.height}px!important`;

                })
            }
            const previewSize = await setupPreview()
            if (previewSize) {
                preview.current.innerHTML = ''
            }
            const ro = new ResizeObserver(resizePreview);
            if (preview) {
                ro.observe(preview.current);
            }

        }
        init()
    })

    //显示器数据
    const [displayData, setDisplayData] = useState([]);
    const [defaultValue, setDefaultValue] = useState('');
    //显示器选中数据
    const [displayCheckData, setDisplayCheckData] = useState({
        value: 0
    });
    const closeDynamicView = async () => {
        await window.tm?.ipcRenderer.invoke('closeObsModal')
    }
    return (
        <Flex gap="middle" vertical={"vertical"} style={{height: "100%", backgroundColor: "#2e477e"}}>
            <div
                id="preview"
                ref={preview}
                style={{
                width: "100%",
                height: "300px",
                display: "flex",
                justifyContent: "center",
                backgroundColor: "#293d76"
            }}>
                <div style={{
                    minWidth: "50%",
                    maxWidth: "100%",
                    height: "100%",
                    textAlign: "center",
                    backgroundColor: "#000000"
                }}>

                </div>
            </div>
            <div style={{
                width: "100%",
                display: "flex",
                justifyContent: "center",
                flex: '1 1 auto',
                overflowY: 'auto'
            }}>
                <Form
                    labelCol={{span: 6}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                    initialValues={{size: "default"}}
                    size={"default"}
                    style={{width: "100%"}}
                >
                    <Form.Item label="显示器">
                        {
                            defaultValue && <Select
                                defaultValue={defaultValue}
                                options={displayData}
                                onChange={async (value, option) => {
                                    console.log("显示器=====", value, option)
                                    setDisplayCheckData(option);
                                    const updateData = {
                                        sceneName: receivedData.data.sceneName,
                                        name: receivedData.data.name,
                                        updateSettings: {
                                            monitor: Number(value),
                                        }
                                    };
                                    console.log("updateSourceSettings", updateData)
                                    const result = await window.tm?.ipcRenderer.invoke('updateSourceSettings', updateData);
                                    console.log("result", result)
                                }}
                            />
                        }

                    </Form.Item>
                </Form>
            </div>
            <div style={{
                width: "100%",
                height: "40px",
                display: "flex",
                justifyContent: "flex-end",
                backgroundColor: "#1c295a",
                alignItems: "center"
            }}>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            await closeDynamicView();
                        }}>取消</Button>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            await closeDynamicView();

                        }}>确定</Button>
            </div>
        </Flex>
    );
};

export default SceneModal;